
<template>
  <!-- 条目管理 -->
  <div class="manage-entries">
    <div class="left">
      <div class="e-tree-file">
        <div class="name">包件名称</div>
        <input class="ipt" type="text" placeholder="输入项目编号" />
        <span>
          <img src="@/assets/search.png" />
        </span>
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
    </div>
    <div class="right">
      <div class="top">
        <div class="left" style="flex: 1;">
          <router-link to=""><el-button @click="$router.back(-1)">返回</el-button></router-link>
          <el-button @click="onPromptPop">弹出信息提示窗</el-button>
          <span style="font-size: 12px;margin-left: 5px;">条款类型</span>
          <el-select v-model="value" placeholder="请选择"  size="mini">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>

          </el-select>
          <el-button type="primary" size="mini">导入</el-button>
             <el-button type="primary" size="mini">导出</el-button>
             <el-button type="primary" size="mini" class="savebtn">保存</el-button>
        </div>
        <div class="right" style="flex: none; width: auto;">
            <div style="display: flex;height:50px;">
                <div class="right-ipt">
                    <input class="ipt" type="text" placeholder="输入项目编号" />
                <img src="@/assets/search.png" >
                </div>
                <div class="right-btn">
                        <el-button type="primary" size="mini" class="search">高级搜索</el-button>
                </div>
            </div>
        </div>
      </div>
      <div class="tabel e-tree-table" style="border:0;">
           <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            border
            default-expand-all
            :tree-props="{
              children: 'children',
              hasChildren: 'hasChildren',
            }"
          >
            <el-table-column prop="a" label="条目编号" width="200px"> </el-table-column>
            <el-table-column prop="b" label="名称" width="200px"> </el-table-column>
            <el-table-column prop="c" label="内容" width="535px"> </el-table-column>
          </el-table>
      </div>
    </div>
    <span style="display: none;">{{localPopConfirm}}</span>
  </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
import { showPromptPop, showErrorPop } from '@/utils/common'
export default {
    components: {},
    computed: {
        ...mapState(['searchForm', 'popConfirm']),
        localPopConfirm () {
            if (this.popConfirm) {
                console.log('监听到 popConfirm 为 true ，可以执行后续业务逻辑了: ')
                // 模拟确定后的操作
                showErrorPop('失败提示信息')
            }
            return this.popConfirm
        }
    },
    // watch: {
    //     'searchForm.searching' (val) {
    //         if (val) {
    //             this.adviceSearch()
    //             // 搜索后还原state状态
    //             let searchForm = JSON.parse(JSON.stringify(this.searchForm))
    //             searchForm.searching = false
    //             this.setSearchData(searchForm)
    //         }
    //     },
    //     popConfirm (val) {
    //         console.log('监听到popConfirm变化了，可以执行后续业务逻辑了: ', val)
    //         // 模拟确定后的操作
    //         showErrorPop('失败提示信息')
    //     }
    // },
    data () {
        return {
            options: [{
                value: '选项1',
                label: '劳务/施工'
            }],
            value: '',
            data: [
                {
                    label: 'Lorem Ipsum1',
                    children: [
                        {
                            label: 'Lorem Ipsum1-1',
                            children: [
                                {
                                    label: 'Lorem Ipsum1-1-1',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: 'Lorem Ipsum2',
                    children: [
                        {
                            label: 'Lorem Ipsum2-1',
                            children: [
                                {
                                    label: 'Lorem Ipsum2-1-1',
                                },
                            ],
                        },
                        {
                            label: 'Lorem Ipsum2-2',
                            children: [
                                {
                                    label: 'Lorem Ipsum2-2-1',
                                },
                            ],
                        },
                    ],
                },
                {
                    label: 'Lorem Ipsum3',
                    children: [
                        {
                            label: 'Lorem Ipsum3-1',
                            children: [
                                {
                                    label: 'Lorem Ipsum3-1-1',
                                },
                            ],
                        },
                        {
                            label: 'Lorem Ipsum3-2',
                            children: [
                                {
                                    label: 'Lorem Ipsum3-2-1',
                                },
                            ],
                        },
                    ],
                },
            ],
            tableData: [
                {
                    id: '1',
                    a: 'SDA1',
                    b: '直营经理部',
                    c: '1313',

                    children: [
                        {
                            id: '1-1',
                            a: 'SDA11  ',
                            b: '  四川川交路桥有限公司',
                            c: '2112',

                            children: [
                                {
                                    id: '1-1-1',
                                    a: 'SDA111',
                                    b: '四川公路桥梁集团建设有限公司',
                                    c: '2154',
                                },
                            ],
                        },
                    ],
                },
                {
                    id: '2',
                    a: 'SDA1',
                    b: '直营经理部',
                    c: '1313',

                    children: [
                        {
                            id: '2-1',
                            a: 'SDA11  ',
                            b: '  四川川交路桥有限公司',
                            c: '2112',

                            children: [
                                {
                                    id: '2-1-1',
                                    a: 'SDA111',
                                    b: '四川公路桥梁集团建设有限公司',
                                    c: '2154',
                                },
                            ],
                        },
                    ],
                },
            ],
            defaultProps: {
                children: 'children',
                label: 'label',
            },
        }
    },
    methods: {
        ...mapMutations(['setSearchData']),
        handleNodeClick () {},
        adviceSearch () {
            console.log('执行高级搜索: ', JSON.stringify(this.searchForm))
        },
        onPromptPop () {
            showPromptPop('提示信息？')
        },
    },
}
</script>
<style lang="scss" scoped>
.manage-entries {
  width: 90%;
  height: 100%;

  margin: auto;
  display: flex;
  padding-top: 5px;
  padding-right: 5px;
  box-sizing: border-box;
  .left {
    width: 200px;

    border: 1px solid #ccc;
    border-radius: 5px;

    box-sizing: border-box;
    position: relative;
    .name {
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-weight: 700;
      background-color: rgb(224, 231, 249);
    }
    .ipt {
      height: 30px;
      border-radius: 5px;
      margin-top: 15px;
      margin-bottom: 15px;
      margin-left: 12px;
      cursor: pointer;
      border: 1px solid #ccc;
    }
    img {
      width: 15px;
      height: 15px;
      position: absolute;
      top: 66px;
      right: 28px;
      cursor: pointer;
    }
    ::placeholder {
      color: #cccc;
      padding-left: 10px;
    }
  }
  .right {
    flex: 1;
    margin-left: 10px;
    display: flex;
    flex-direction: column;

    .top {
      height: 50px;
      display: flex;
      justify-content: space-between;
      border-radius: 5px;
      border: 1px solid #ccc;

      .left {
        width: 430px;
        line-height: 50px;
         border: 0;
        ::v-deep.el-select>.el-input{
            width: 150px;
            height: 40px;
            margin-left: 10px;
            margin-right: 10px;
        }
        ::v-deep.el-button--mini{
            background-color: rgb(122, 168, 24);
        }
        .savebtn{
            background-color: rgb(46, 97, 215);
        }
      }
      .center {
        flex: 1;
      }
      .right {
        width: 200px;
        position: relative;
        .right-ipt{
            width: 70%;
            height: 100%;

             .ipt{
            width: 150px;
            height: 30px;
            border: 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-top: 10px;
        }
        img{
            width: 15px;
            height: 15px;
            position: absolute;
            top: 20px;
            right: 107px;
            cursor: pointer;
        }
        ::placeholder{
            color: #cccc;
            padding-left: 10px;
        }
        }
        .right-btn{
            width: 30%;
            height: 100%;
            padding-right: 10px;
            .search{
                width: 74px;
                height: 33px;
                margin-top: 10px;
            }
        }

      }
    }
    .tabel {
      flex: 1;
      margin-top: 20px;
      border-radius: 5px;
      border: 1px solid #ccc;

    }
  }
}
</style>

